<template>
<!-- V2.3.0充电管家样式调整功能优化 @CHD 2023-11-20 -->
  <view class="charging-manager-box">
    <!-- 顶部基础内容展示区域 -->
    <view class="top-base-data-show-box">
      <!-- 基础内容展示 -->
      <view class="top-base-data-title-box">
        <view class="base-data-title">{{chargingStationInfo.stationName || ''}}</view>
        <popupPhone ref="popupPhoneRef" :popupShow="false">
          <template slot="content">
            <image src="../static/chargingManager/charhing-phone-icon.png"  class="base-data-title-icon-image"/>
          </template>
        </popupPhone>
      </view>
      <view class="top-base-data-cenant-box">
        <view class="charge-trade-box">
          <image src="../static/chargingManager/trade.png" class="charge-trade-icon-image" />
          <view class="businessHours-text">{{chargingStationInfo.busineHours || ''}}</view>
        </view>
        <view class="charge-map-box" @click="callUpAddressNavigation(chargingStationInfo.stationLat,chargingStationInfo.stationLng,chargingStationInfo.stationName,chargingStationInfo.address)">
          <image src="../static/chargingManager/map.png" class="charge-trade-icon-image" />
          <view class="map-text">{{chargingStationInfo.address || ''}}</view>
        </view>
      </view>
    </view>
    <!-- Charging-Fees Show -->
    <view class="chargin-canant-box">
      <view class="charging-fee-box">
        <view class="charging-fee-title-box">
          <image src="../static/chargingManager/chargingFee.png" class="charging-fee-img"/>
          充电费
        </view>
        <view class="changeTime">
          <view class="nowTime">{{ handleSlice(curTimePolicy.minTime)}}-{{handleSlice(curTimePolicy.maxTime)}}</view>
          <view class="otherTime" @click="timePopup = true">其他时段</view>
        </view>
      </view>
      <!-- Fees -->
      <view class="chargingFees">
        <view class="chargingFee-Money"><span class="chargingFee-num">{{priceAll}}</span>元/度</view>
        <view class="serviceBox">
          <view class="change">电费 {{curTimePolicy.elecPrice ? curTimePolicy.elecPrice : 0}}  元/度</view>
          <view class="line"></view>
          <view class="service">服务费 {{curTimePolicy.servicePrice ? curTimePolicy.servicePrice : 0}} 元/度</view>
        </view>
      </view>
      <!-- Charging limit -->
      <view class="charging-limit">
        <view class="limit-list-box">
          <view class="limit-lable">充电额度</view>
          <view class="limit-value">{{handleUserAmount(userChargeData)}}</view>
        </view>
        <view class="limit-list-box">
          <view class="limit-lable">个人余额</view>
          <view class="limit-value-back">
            <view>{{userChargeData.userAmount || 0}}</view>
            <view class="recharge" @click="rechargeMoney">去充值</view>
          </view>
        </view>
      </view>

      <!-- charging list -->
      <view class="device-box">
        <view class="device-header">
          <view class="device-title">
            <img src="../static/chargingManager/device.png" alt="" class="deviceImg">
            <view>设备</view>
          </view>
          <view class="device-text"><span class="idle">空闲 {{availableAll ? availableAll : 0}}</span>/{{idleAll ? idleAll : 0}}</view>
        </view>
        <view class="device-content">
          <view class="device-listBox" v-for="(device,deviceIndex) in deviceList" :key="deviceIndex">
            <img :src="device.cover" alt="" class="device-contentImg">
            <view class="device-right">
              <view>{{device.name}}</view>
              <view class="device-textBox">
                <view>可用交流桩<span class="idle">{{device.acIdle}}</span><span class="idleBack">/{{device.acTotal}}</span></view>
                <view>可用直流桩<span class="idle">{{device.dcIdle}}</span><span class="idleBack">/{{device.dcTotal}}</span></view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 按钮 -->
    <view class="scanCode" v-if="!currentChargeOrder" @click="scanCodeCharging">
      <view class="codeBox">
        <img src="../static/chargingManager/ORcode.png" alt="" class="codeImg">
        <view>扫码充电</view>
      </view>
    </view>
    <!-- 充电进行中按钮 -->
    <view class="scanCode-back" v-else @click="hnadleChargeProceed">充电进行中</view>
    </view>

    <u-popup :show="timePopup" :closeable="true" @close="timePopup = false">
      <view class="timePopupBox">
        <view class="chargingStandards-title">收费标准</view>
        <view class="chargingStandards-box">
          <view class="timeContentList" v-for="(v,index) in timeSlotList" :key="index">
            <view class="timeSlot">
              {{ v.minTime.slice(0,5) }}
              -
              {{v.maxTime.slice(0,5)}}
            </view>
            <view>{{v.priceAll}}元/度</view>
            <view class="timeServiceBox">
              <view class="change">电费 {{v.elecPrice}} 元/度</view>
              <view class="line"></view>
              <view class="service">服务费 {{v.servicePrice}} 元/度</view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {chargePileQueryApi,chargeWhitelistOneselfApi,chargePileStationInfo,chargeTimePriceApi,chargeEquipmentGroupingListApi } from "../api/chargingManager/index"
import { goLoginReturnOriginalPath } from "../common/uniapi"
import popupPhone from "@/components/popupPhone"
const chargingInitData = {
  stationName: '',
  busineHours: '',
  address: ''
}
export default {
  components:{
    popupPhone
  },
  data(){
    return{
      //充电桩信息
      chargingStationInfo: Object.assign({},chargingInitData),
      // 当前时间的策略
      curTimePolicy:{},
      // 当前时间电费
      priceAll: '',
      // 充电桩时段费用
      timeSlotList:[],
      // 弹框开关
      timePopup: false,
      // 当前充电订单
      currentChargeOrder: null,
      // 设备信息
      deviceList:[],
      availableAll: 0,
      idleAll: 0,
      // 用户充电余额数据
      userChargeData:{},
    }
  },
  onShow() {
    this.initData()
    // 获取服务热线
    this.$refs.popupPhoneRef.getIcsHotlineList('charge')
  },
  computed: {
    hasLogin() {
      return this.$store.getters.hasLogin
    }
  },
  methods:{
    initData(){
      // // 获取充电状态
      this.getChargeStatus()
      // // 获取用户充电余额
      this.getChargeBalance()
      //查询充电桩信息
      this.getChargePileInfo()
    },
    // 获取用户余额
    getChargeBalance(){
      chargeWhitelistOneselfApi().then(res=>{
        this.userChargeData = res.data
        console.log( this.userChargeData);
      })
    },
    // 查询充电状态
    getChargeStatus(){
      chargePileQueryApi().then(res=>{
        this.currentChargeOrder = res.data
      })
    },
    /**获取充电桩信息*/
    getChargePileInfo(){
      chargePileStationInfo().then(res=>{
        this.chargingStationInfo = res.data[0] || chargingInitData
        const { stationId, operatorId } = this.chargingStationInfo
        // 获取充电桩时段费用
        this.getChangeTimePrice(stationId,operatorId)
        // 设备分组统计列表
        this.equipmentGroupingList(stationId)
      })
    },
    /**其他时段 - 获取充电桩时段费用*/
    getChangeTimePrice(stationId,operatorId){
      chargeTimePriceApi({stationId,operatorId}).then(res=>{
        // 计费信息
        this.timeSlotList = res.data ? res.data.policyInfos : []
        this.timeSlotList.forEach(v=>{
          v.priceAll = v.elecPrice + v.servicePrice
        })
        // 当前时间的策略
        this.curTimePolicy = res.data?.curTimePolicy
        this.priceAll = this.curTimePolicy?.elecPrice + this.curTimePolicy?.servicePrice || 0
      })
    },
    /**获取设备分组统计列表*/ 
    equipmentGroupingList(stationId){
      chargeEquipmentGroupingListApi({stationId}).then(res=>{
        this.deviceList = res.data
        // 计算总数
        this.availableAll = 0
        this.idleAll = 0
        this.deviceList.forEach(v=>{
          this.availableAll += v.acIdle + v.dcIdle
          this.idleAll += v.acTotal + v.dcTotal
        })
      })
    },
    // 余额充值
    rechargeMoney(){
    // 没登陆 弹出去登录按钮
    if(!this.hasLogin) return goLoginReturnOriginalPath()
      uni.navigateTo({
        url: `/pages/charging/chargingManager/accountBalance`
      })
    },
    /**扫码*/
    scanCodeCharging(){
      if(!this.hasLogin) return  goLoginReturnOriginalPath()
      uni.scanCode({
        autoDecodeCharset: true,
        success: function (res) {
          let path = res.path
          let sceneList = path.split('=') || ['', '']
          let scene = sceneList[1].replace('%253A',':').replace('%3A',':')
          uni.navigateTo({
            url: `/pages/charging/chargingManager/devicePopup?scene=${scene}`
          })
        },
        fail :function (res){
          uni.$u.toast('扫码失败')
        },
      })
    },
    /**处理充电进行中*/
    hnadleChargeProceed(){
      const { ConnectorId, StartChargeSeq} = this.currentChargeOrder
      uni.navigateTo({
          url: `/pages/charging/chargingManager/inProgress?connectorId=${ConnectorId}&startChargeSeq=${StartChargeSeq}`
      })
    },
    /**处理用户额度展示*/
    handleUserAmount(userData){
      const { type, whitelistAmount, whitelistAmountAdd } = userData

      // 免费白名单
      if (type == 1) {
        return '--'
      }
      // 每月白名单 
      if (type == 2){
        return whitelistAmount + '/' + whitelistAmountAdd
      }
      // 长期白名单
      if (type == 3 ){
        return whitelistAmount
      }

      return 0
    },
    /**处理字符串截取*/
    handleSlice(val){
      if (!val) return 0
      return val.slice(0,5)
    },
    // 微信小程序调起地址导航、
    /**
     * 	@param {Number} lat 地址纬度
     * 	@param {Number} lng 地址经度
     *  @param {string} addressName 地址名称
     *  @param {string} fullAddress 详细地址
     * **/
    callUpAddressNavigation(lat = 0,lng = 0,addressName,fullAddress){
      //  微信小程序  
      // #ifdef MP-WEIXIN
      wx.openLocation({
        latitude: lat,         // 纬度
        longitude: lng,        // 经度
        name:fullAddress,      // 地址名称
        address:'',   // 详细地址
        success:function(res){
          
        },
        fail: function (err) {
          
        }
      })
    // #endif
    },
  }
}
</script>

<style lang="less" scope>
.charging-manager-box {
  padding: 21px 15px 11px 15px;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #557EFF 0%, rgba(85,126,255,0) 98%);
  box-sizing: border-box;
}
.top-base-data-show-box {
  height: 80px;
  background-image: url('https://cdn-laser.oss-cn-shanghai.aliyuncs.com/spmp/images/charge-2.png');
  background-size: 122px 64px;
  background-repeat: no-repeat;
  background-position: right  bottom
}
.top-base-data-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.base-data-title {
  width: 282px;
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.base-data-title-icon-image {
  width: 24px;
  height: 24px;
}
.top-base-data-cenant-box {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
}
.charge-trade-icon-image {
  margin-right: 10px;
  width: 16px;
  height: 16px;
}
.charge-trade-box {
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.top-base-data-cenant-box {
  width: 282px;
  display: flex;
}
.charge-map-box {
  display: flex;
  align-items: center;
}
.map-text {
  width: 144px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chargin-canant-box {
  width: 100%;
  min-height: calc(100vh - 112px);
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
}
.chargin-canant-box {
  padding: 18px 15px 39px 15px;
  box-sizing: border-box;
}
.charging-fee-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.charging-fee-img {
  margin-right: 9px;
  width: 16px;
  height: 16px;
}
.charging-fee-title-box {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
}
.changeTime{
  display: flex;
  font-size: 12px;
  color: #767676;
}
.otherTime{
  color: #557EFF;
  margin-left: 8px;
}
.chargingFees{
  font-size: 12px;
  margin-top: 12px;
  display: flex;
}
.chargingFee-Money{
  color: #557EFF;
  display: flex;
  align-items: center;
  font-size: 12px;
}
.chargingFee-num{
  font-weight: 600;
  font-size: 24px;
  margin-right: 5px;
}
.serviceBox{
  display: flex;
  align-items: center;
  margin-left: 12px;
  color: #767676;
  .change{
    margin-right: 5px;
  }
  .line{
    width: 1px;
    height: 12px;
    background: #767676;
  }
  .service{
    margin-left: 5px;
  }
}
.charging-limit {
  margin-top: 15px;
  padding: 13px 15px;
  width: 100%;
  height: 74px;
  background: #ECF3FE;
  border-radius: 8px 8px 8px 8px;
  background-image: url('https://cdn-laser.oss-cn-shanghai.aliyuncs.com/spmp/images/charging-limit-bgc-image.png');
  background-size: cover;
  box-sizing: border-box;
}
.limit-list-box {
  display: flex;
  align-items: center;
}
.limit-lable {
  width: 59px;
  font-size: 12px;
  color: #767676;
}
.limit-value {
  width: calc(100% - 59px);
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.limit-value-back {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  display: flex;
  align-items: center;
}
.recharge {
  margin-left: 10px;
  font-size: 12px;
  color: #557EFF;
}
.device-box{
  margin-top: 35px;
}
.device-header{
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: solid 1px #F6F6F7;
}
.deviceImg{
  width: 14px;
  height: 14px;
  margin-right: 7px;
}
.device-title{
  display: flex;
  align-items: center;
}
.device-text{
  font-weight: 600;
}
.idle{
  color: #00D292;
  margin-left: 4px;
  font-weight: 600;
}
.idleBack{
  color: #000;
  font-weight: 600;
}
.device-content{
  width: 100%;
  height: 240px;
  overflow: auto;
}
.device-listBox{
  margin-top: 10px;
  display: flex;
  padding-bottom: 10px;
  border-bottom: solid 1px #F6F6F7;
}
.device-contentImg{
  width: 80px;
  height: 60px;
  border-radius: 8px 8px 8px 8px;
}
.device-right{
  width: calc(100% - 90px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
  font-size: 14px;
}
.device-textBox{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #767676;
}
.chargingFeeImg{
  width: 14px;
  height: 14px;
  margin-right: 7px;
}
.chargingManager-recharge{
  width: 100%;
  height: 44px;
  background: #ECF3FE;
  box-sizing: border-box;
  padding: 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  border-radius: 8px 8px 8px 8px;
}
.chargingManager-box{
  display: flex;
  align-items: center;
}
.chargingManagerImg{
  width: 24px;
  height: 24px;
  margin-right: 11px;
}
.chargingManager-text{
  font-size: 12px;
  color: #767676;
}
.money{
  font-weight: 600;
  font-size: 18px;
  margin-left: 6px;
}
.recharge{
  color: #557EFF;
  font-size: 12px;
}
.scanCode{
  margin: 45px auto 0 auto;
  height: 48px;
  line-height: 48px;
  border-radius: 24px 24px 24px 24px;
  color: #fff;
  box-sizing: border-box;
  background: linear-gradient(180deg, #84A2FF 0%, #557EFF 100%);
  font-size: 14px;
  text-align: center;
  line-height: 48px;
}
.scanCode-back {
  margin: 45px auto 0 auto;
  width: 100%;
  height: 48px;
  line-height: 48px;
  border-radius: 24px 24px 24px 24px;
  color: #fff;
  box-sizing: border-box;
  background: linear-gradient(180deg, #84A2FF 0%, #557EFF 100%);
  font-size: 14px;
  text-align: center;
  line-height: 48px;
}
.codeBox{
  width: 100px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.codeImg{
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.mapImg{
  width: 16px;
  height: 16px;
  margin-right: 9px;
}
.submitBox{
  height: 300px;
  background: #ffffff;
  border-radius: 24px;
  padding: 15px;
}
.submitBox-text{
  font-size: 16px;
  font-weight: 600;
}
/deep/ .u-popup__content {
  background-color: #fff;
  position: relative;
  border-radius: 20px;
}
.submitBox-content{
  width: 100%;
  height: 200px;
  margin-top: 59px;
  box-sizing: border-box;
  padding: 0 45px;
}
.submitBox-tip{
  font-size: 12px;
  color: #767676;
  margin-top: 30px;
  text-align: center;
}
.phoneImg{
  width: 16px;
  height: 16px;
  margin-right: 7px;
}
.dial{
  width: 100%;
  height: 48px;
  border: 1px solid #4D82FC;
  color: #557EFF;
  line-height: 48px;
  border-radius: 87px 87px 87px 87px;
  display: flex;
  align-items: center;
  padding: 0 60px;
  box-sizing: border-box;
}
.callPhone{
  width: 85px;
  height: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.address-content{
  width: calc(100% - 25px);
  font-size: 12px;
  white-space: wrap;
}
.businessHours-content{
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
}
.timeBox{
  width: 15px;
  height: 14px;
  margin-right: 9px;
}
.businessHours{
  display: flex;
  align-items: center;
}
.businessHours-text{
  font-size: 12px;
  min-width: 73px;
}
.timePopupBox{
  width: 100%;
  height: 370px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 24px 24px 0px 0px;
  padding: 20px 15px;
  color: #1A1A1A;
}
.chargingStandards-box{
  height: 300px;
  overflow: auto;
}
.chargingStandards-title{
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: solid 1px #F6F6F7;
}
.timeContentList{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 17px;
  padding-bottom: 15px;
  border-bottom: solid 1px #F6F6F7;
}
.timeSlot{
  color: #767676;
}
.timeServiceBox{
  display: flex;
  align-items: center;
  margin-left: 12px;
  .change{
    margin-right: 5px;
  }
  .line{
    width: 1px;
    height: 12px;
    background: #767676;
  }
  .service{
    margin-left: 5px;
  }
}
</style>